<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="修改费用"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="65vw"
    unmount-on-close
  >
    <a-row>
      <a-col style="display: flex; justify-content: end; margin-bottom: 24px">
        <a-button type="primary" @click="addAccountPeriod">
          <template #icon>
            <icon-plus />
          </template>
          添加账期
        </a-button>
      </a-col>
    </a-row>
    <a-table :columns="columns" :data="data">
      <template #payableTime="{ record }">
        <div v-if="record.payableStatus == 'unpaid' || record.payableStatus == 'reject' || record.newAdd" style="display: flex">
          <span style="color: red; margin-left: 4px">*</span>
          <i-date-picker v-model="record.payableTime" format="YYYY-MM-DD" />
        </div>
        <div v-else>{{ dayjs(record.payableTime).format('YYYY-MM-DD') }}</div>
        <div v-if="record.payableTimeError" style="color: red; font-size: 12px">请选择应结日期</div>
      </template>
      <template #payableAmount="{ record }">
        <div v-if="record.payableStatus == 'unpaid' || record.payableStatus == 'reject' || record.newAdd" style="display: flex">
          <span style="color: red; margin-left: 4px">*</span>
          <a-input v-model="record.payableAmount" />
        </div>
        <div v-else>{{ record.payableAmount }}</div>
        <div v-if="record.payableAmountError" style="color: red; font-size: 12px">请输入应结金额</div>
      </template>
      <template #remake="{ record }">
        <a-input v-model="record.billRemark" />
      </template>
      <template #operate="{ record }">
        <a v-if="record.newAdd" style="font-size: 14px; font-weight: 400; color: #3370ff; cursor: pointer" @click="handleDelete(record)">
          删除
        </a>
      </template>
    </a-table>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { getEditFeeDetailByType1, editFeeDetailForType1, getEditFeeDetailByType2, editFeeDetailForType2 } from '@/api/asset/carTransfer'
  import dayjs from 'dayjs'
  import { Message } from '@arco-design/web-vue'
  import { cloneDeep } from 'lodash-es'
  const okLoading = ref(false)

  const showModal = ref(false)
  const validateData = ref(true)
  const type = ref('')
  const columns = [
    {
      title: '期数',
      dataIndex: 'payableNumName',
      width: 100,
    },
    {
      title: '应结日期',
      dataIndex: 'payableTime',
      slotName: 'payableTime',
      width: 170,
    },
    {
      title: '应结金额(元)',
      dataIndex: 'payableAmount',
      slotName: 'payableAmount',
    },
    {
      title: '实结金额(元)',
      dataIndex: 'paymentAmount',
    },
    {
      title: '费用状态',
      dataIndex: 'payableStatusName',
    },
    {
      title: '备注',
      dataIndex: 'billRemark',
      slotName: 'remake',
    },
    {
      title: '操作',
      slotName: 'operate',
    },
  ]

  const data = ref([])
  const getDetailApi = (record) => {
    let fetch
    let params = {
      id: record.businesId,
    }
    if (type.value == 1) {
      fetch = getEditFeeDetailByType1
    } else if (type.value == 2) {
      fetch = getEditFeeDetailByType2
    }
    fetch(params).then((res) => {
      if (res.code == 200) {
        data.value = res.result
      }
    })
  }

  // 添加账期
  const addAccountPeriod = () => {
    let length = data.value.length - 1
    data.value.splice(length, 0, {
      payableNum: length,
      payableNumName: `第${length}期`,
      newAdd: true,
    })
  }

  // 删除账期
  const handleDelete = (record) => {
    let index = data.value.findIndex((item) => {
      return item.payableNum == record.payableNum
    })
    data.value.splice(index, 1)
  }

  const emit = defineEmits(['refreshData'])
  const onConfirm = () => {
    let fetch
    if (type.value == 1) {
      fetch = editFeeDetailForType1
    } else if (type.value == 2) {
      fetch = editFeeDetailForType2
    }
    console.log(fetch)
    validate()
    if (validateData.value) {
      let params = cloneDeep(data.value)
      params.forEach((item) => {
        item.payableTime = dayjs(item.payableTime).format('YYYY-MM-DD 00:00:00')
        delete item.newAdd
        delete item.payableTimeError
        delete item.payableAmountError
      })
      validate(params)
      fetch(params).then(() => {
        Message.success('操作成功')
        onClose()
        emit('refreshData')
      })
    }
  }

  // 校验必填项
  const validate = () => {
    validateData.value = true
    if (data.value && data.value.length) {
      data.value.forEach((item) => {
        if (item.payableStatus == 'unpaid' || item.payableStatus == 'reject' || item.newAdd) {
          if (!item.payableTime) {
            item.payableTimeError = true
            validateData.value = false
          }
          if (!item.payableAmount) {
            item.payableAmountError = true
            validateData.value = false
          }
        }
      })
    }
  }

  const show = (record, way) => {
    console.log(type)
    showModal.value = true
    type.value = way
    console.log(123131)
    getDetailApi(record)
  }

  const onClose = () => {
    showModal.value = false
    data.value = []
  }

  defineExpose({
    show,
  })

  onMounted(() => {
    // if (type) {
    //   getDetailApi()
    // }
  })
</script>
